<template>
  <div class="container">
 <div class="item">
        
             <div v-for="(imgUrl, index) in bannerList" v-show="index===mark" :key="index" class="slideshow">
                  <a href="#">
                     <img :src=imgUrl>
                  </a>
             </div>
        <button class="btn right" @click="nextIndex">&gt;</button>
         <button class="btn left" @click="prevIndex">&lt;</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
      return {
        mark: 0, //比对图片索引的变量  
        bannerList:[
          require('../assets/a1.webp'),
          require('../assets/a3.webp'),
          require('../assets/a2.webp'),
          require('../assets/a4.webp'),
          require('../assets/a5.webp'),
          require('../assets/a6.webp'),
        ] ,
      }
  },

  methods:{
    prevIndex(){
      this.mark = this.mark - 1;
      if(this.mark < 0){
        this.mark = 5;
      }
      console.log(this.mark);
    },
    nextIndex(){
      this.mark = this.mark + 1;
      if(this.mark == 6){
        this.mark = 0;
      }
      console.log(this.mark);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    autoPlay () {  
      this.mark++;  
      if (this.mark === 6) { //当遍历到最后一张图片置零  
        this.mark = 0  
      }  
    },  
    play () {  
      setInterval(this.autoPlay, 2000)  
    },  
    change (i) {  
      this.mark = i  
    }  
  },
  created () {  
    this.play()  
  },
  // 轮播
  components: {

  }
}
</script>

<style scoped>
img{
    width: 80%;
    height: 60%;
}
button{
    width: 12vw;
    height: 8vh;
    border: none;
    background: skyblue;
    
    margin: 60px;
    font-size: 5vw;
    color: aliceblue;
    line-height: 8vh;
    text-align: center;

}
button:hover{
background: red;
}
</style>
